import {AddIcon, CheckIcon, CloseIcon} from '@chakra-ui/icons';
import {useState, useRef} from 'react';
import {
    Modal,
    ModalOverlay,
    ModalContent,
    ModalHeader,
    ModalFooter,
    ModalBody,
    Input,
    InputGroup,
    InputRightElement,
    ModalCloseButton,
    Stack,
    Button,
    useBoolean
} from '@chakra-ui/react';
import {Props} from './props';
import DefaultToast, {Toast} from '@/utils/defaultToast';
import {ProjectAPI} from '@/api';
export default function AddProject(props: Props) {
    const Toast: Toast = DefaultToast();
    const modalDefaultFocus = useRef(null);
    const [projectName, setProjectName] = useState('');
    const [existProject, setExistProject] = useBoolean();
    const [isOpen, setIsOpen] = useBoolean();
    const showModal = () => {
        setIsOpen.on();
    };
    const hideModal = () => {
        setIsOpen.off();
    };
    const onSubmit = () => {
        if (!projectName) {
            Toast.error('请输入项目名称');
            return;
        }
        if (existProject) {
            Toast.error('请输入项目名称');
            return;
        }
        ProjectAPI.addProject({
            projectName
        }).then((res: ProjectDir[]) => {
            props.onChange([...res]);
            resetModal();
        });
    };

    const resetModal = () => {
        setProjectName('');
        setExistProject.on();
        hideModal();
    };
    const projectNameChanged = (target: EventTarget & HTMLInputElement) => {
        const {list} = props;
        const idx = list.findIndex((item) => item.name === target.value);
        idx >= 0 ? setExistProject.on() : setExistProject.off();
        setProjectName(target.value);
    };
    return (
        <>
            <div className="project item" onClick={showModal}>
                <AddIcon />
            </div>
            <Modal isOpen={isOpen} onClose={hideModal} size="3xl" initialFocusRef={modalDefaultFocus}>
                <ModalOverlay />
                <ModalContent>
                    <ModalHeader>新建项目</ModalHeader>
                    <ModalCloseButton size="sm" />
                    <ModalBody>
                        <Stack spacing="4">
                            <InputGroup>
                                <Input
                                    placeholder="项目名称"
                                    ref={modalDefaultFocus}
                                    isRequired={true}
                                    value={projectName}
                                    onChange={({target}) => projectNameChanged(target)}
                                />
                                <InputRightElement
                                    children={
                                        !projectName || existProject ? (
                                            <CloseIcon color="red.500" />
                                        ) : (
                                            <CheckIcon color="green.500" />
                                        )
                                    }
                                />
                            </InputGroup>
                        </Stack>
                    </ModalBody>
                    <ModalFooter>
                        <Button mr={3} onClick={resetModal}>
                            取消
                        </Button>
                        <Button colorScheme="blue" onClick={onSubmit}>
                            保存
                        </Button>
                    </ModalFooter>
                </ModalContent>
            </Modal>
        </>
    );
}
